<script src="message.component.ts"></script>
<ul id="messageList" (DOMNodeInserted)="onDOMNodeInserted()" style="overflow: auto">
    <li *ngFor="let message of messages" (click)="msgSelected(message)">
        <div [ngSwitch]="message.type">
            <!-- 欢迎消息 -->
            <div class="system-notification" *ngSwitchCase=" 'welcome' ">
                <strong>系统:&nbsp;&nbsp;</strong><span>{{message.content}}</span>
            </div>
            <!-- 退出消息 -->
            <div class="system-notification" *ngSwitchCase=" 'bye' ">
                <strong>系统:&nbsp;&nbsp;</strong>
                <span>{{message.content}}</span></div>
            <!-- 普通消息 -->
            <div class="normal-message"
                 *ngSwitchCase=" 'normal' ">
                <!--我自己发送的信息靠右边， 别人发送给我的信息靠左边 ( ngClass= other) -->
                <div class="normal-message" [ngClass]="{others: message.from !=loginInfo.userName}">

                    <!-- ng-class是根据 key: value来设置class -->
                    <div class="name-wrapper">
                        <span>{{message.from}} @ </span><span>{{message.timeStamp}}</span>
                    </div>
                    <div class="content-wrapper"><span class="content">{{message.content}}</span><span
                            class="avatar" [ngStyle]="{'background-color':loginInfo.color}"></span>
                    </div>
                </div>
            </div>
        </div>


    </li>
</ul>


